<template>
	<Loading v-show="isLoading"></Loading>
	<div class="main">
		<div class="user">
			<div class="user-avatar">
				<img v-if="authorizeData.headimgurl" :src="authorizeData.headimgurl">
				<img v-else  src="../../../assets/images/wechat/index/public/logo.jpg">
			</div>
			<div class="user-name">{{authorizeData.nickname}}</div>
		</div>
		<div class="prompt">
			<div class="prompt-title">-提示-</div>
			<ul>
				<li>
					<div class="prompt-img"><img src="../../../assets/images/wechat/leader/authorizeinfo/icon02.png"></div>
					<div class="prompt-conent">授权后将获取你的微信公开信息（头像，昵称等）</div>
				</li>
				<li>
					<div class="prompt-img"><img src="../../../assets/images/wechat/leader/authorizeinfo/icon02.png"></div>
					<div class="prompt-conent">在授权绑定后，你将可以使用微信一键登录，收到平台下发的通知消息等</div>
				</li>
				<li>
					<div class="prompt-img"><img src="../../../assets/images/wechat/leader/authorizeinfo/icon02.png"></div>
					<div class="prompt-conent">若下面提示未关注公众号，请及时关注，避免错过平台互动信息</div>
				</li>
				
			</ul>

		</div>
		<div class="authorize">
			<ul>
				<li>
					<div class="authorize-title">授&nbsp;&nbsp;&nbsp;权</div>
					<div class="authorize-sign">
						<div @click="updateLeader()" class="authorize-sign-active">{{authorizeData.wechat?'取消授权':'点击授权'}}</div>
					</div>
				</li>
				<li>
					<div class="authorize-title">公众号</div>
					<div class="authorize-sign">
						<div>点击关注</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
//引入组件
import Loading from '@/components/wechat/index/Loading.vue'
//引入js	
import router from '../../../router'
//import {request} from '../../../utils/request'
	
export default {
	name: 'AuthorizeInfo',
	components: {
		Loading
	},
    data(){
		return {
			isLoading:true,//监控页面是否加载完毕
			ajaxFlag:true,//监控ajax请求，避免多次请求
			ajaxData:{},//ajax提交的值
			
			authorizeData:{openid:"",nickname:"未知",headimgurl:"",wechat:0}//微信授权信息
		}
    },
    created:function(){
		var that=this;
		var token=localStorage.getItem('token');
		
		var code=that.getQueryString("code");
		var state=that.getQueryString("state");
		
		if(!code||!state)
		{
			router.push({path:'/wechatLeader/leaderCenter'})
			return 0;
		}
		that.ajaxData='code='+code+'&state='+state;
		request({
			headers:{
				'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
				'Authorization':token
			},
			url: "/wechatLeader/authorizeInfo",
			method: "post",
			data:that.ajaxData
		}).then(function(res){
		   if(res.flag)
		   {
			  that.authorizeData=res.authorizeData;
		   }
		   else{
			   router.push({path:'/wechatLeader/leaderCenter'})
			   return 0;
		   }
		   that.isLoading=false;
		}).catch(function(error){
			that.isLoading=false;
			console.log(error);
		})
  	},
  	beforeMount: function() {
		
    },
  	mounted: function () {
  		
  	},
  	methods:{
		// 获取地址栏参数
		getQueryString:function(name) {
			let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
			let url = window.location.search.substr(1).match(reg);
			return url ? decodeURI(url[2]) : null;
		},
  		updateLeader:function(){
  			var that=this;
			var token=localStorage.getItem('token');
			
  			if(!that.ajaxFlag)
  			{
  				alert("请求过于频繁");
				return 0;
  			}
			if(!that.authorizeData.openid)
  			{
				alert("授权信息存在缺失");
				return 0;
			}
			
			that.ajaxFlag=false;
			that.ajaxData="";
			if(that.authorizeData.wechat==0){
				that.ajaxData='action=grantauthority';
			}
			else{
				that.ajaxData='action=revokeauthority';
			}
			
			that.ajaxData=that.ajaxData+"&openid="+that.authorizeData.openid;
			request({
				headers:{
					'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
					'Authorization':token
				},
				url: "/wechatLeader/updateLeader",
				method: "post",
				data: that.ajaxData
			}).then(function(res){
			  if(res.flag)
			  {
				  alert(res.content);
				  localStorage.setItem('token','');
				  router.push({path:'/wechat/leaderLogin'});
				  return 0;
			  }
			  else{
				  alert(res.content);
			  }
			  that.ajaxFlag=true;
			}).catch(function(error){
				console.log(error);
			})
  		
  			
  		}
  	}
}
</script>

<style lang="scss" scoped>
.main{ width:100%;overflow:hidden; position: relative}
.user {
	margin-top:5rem;
}
.user-avatar {
	width: 4rem;
	height: 4rem;
	margin: auto;
}
.user-avatar>img {
	width: 100%;
	height: 100%;
}
.user-name {
	font-size: 1rem;
	line-height: 3rem;
	text-align: center;
	color: #0a0aa5;
}
.prompt {
	width: 80%;
	margin: auto;
	position: relative;
}
.prompt::before {
	content: "";
	position: absolute;
	width: 80%;
	height: 1px;
	background: #e6e6e6;
	left: 10%;
	top: 0rem;
}
.prompt::after {
	content: "";
	position: absolute;
	width: 80%;
	height: 1px;
	background: #e6e6e6;
	left: 10%;
	bottom: -2rem;
}
.prompt>ul {
	width: 100%;
	margin-bottom: 3rem;
}
.prompt>ul>li {
	width: 100%;
	display: flex;
	font-size: 0.75rem;
	line-height: 1rem;
	margin-top: 0.75rem;
}
.prompt>ul>li:first-child {
	margin-top: 0rem;
}
.prompt-title {
	color: #777677;
	line-height: 3rem;
	font-size: 0.875rem;
	text-align: center;
}
.prompt-img {
	width: 0.75rem;
	height: 0.75rem;
	margin-top: 0.125rem;
}
.prompt-img>img {
	width: 100%;
	height: 100%;
}
.prompt-conent {
	width: 95%;
	margin-left: 0.5rem;
	color: #b3b1b3;
}
.authorize {
	width: 80%;
	margin: auto;
}
.authorize>ul {
	width: 100%;
}
.authorize>ul>li {
	width: 100%;
	display: flex;
	font-size: 0.875rem;
	line-height: 2rem;
	margin-top: 0.75rem;
}
.authorize-title {
	width: 40%;
	margin-left: 10%;
}
.authorize-sign {
	width: 40%;
	margin-right: 10%;
}
.authorize-sign>div {
	float: right;
	right: 0px;
	width: 6rem;
	color: #0a0aa4;
	border: 1px solid #0A0AA4;
	box-shadow: 1px 0px 0.5rem 0px #d1d1d1;
	text-align: center;
	border-radius: 0.5rem;
}
.authorize-sign-active {
	background-color: #0a0aa4 !important;
	color: #FFFFFF !important;
}
</style>
